<!DOCTYPE html>
<html lang="zh" xml:lang="zh">
<head>
    <meta charset='utf-8'>
    <title>dataBar</title>
    <script type='text/javascript' src="../../ref/jquery-3.2.1.min.js"></script>
    <script src="../../ref/echarts-all.js"></script>
    <style type="text/css">
        * {
            font-family: "微软雅黑";
        }

        body {
            margin: 20px;
        }

        .chart {
            width: 50%;
            height: 50%;
            position: absolute;
        }

        #_1, #_2 {
            top: 0px;
        }

        #_3, #_4 {
            bottom: 0px;
        }

        #_1, #_3 {
            left: 0px;
        }

        #_2, #_4 {
            right: 0px;
        }

        #chart1, #chart4 {
            width: 95%;
            height: 95%;
            margin: 2.5%;
            position: relative;
        }

        #chart2, #chart3 {
            width: 100%;
            height: 100%;

        }

        #chart1 {
            margin: 3%;
            height: 80%;
            border: 1px solid green;
        }

        .dateTime {
            width: 30%;
            height: 50px;
            float: left;
        }

        p, .dateTime {
            margin-left: 20px;
        }

        .input {
            width: 140px;
        }

        #timeEnd {
            left: 200px;
        }

        #timeBegin, #timeEnd {
            margin: 5px;
        }

        .time {
            width: 100%;
            height: 50px;
        }

        .place {
            width: 100%;
            height: 200px;
        }

        .place label {
            margin-left: 20px;
            margin-top: 20px;
        }

        .placeName {
            color: black;
            margin: 15px;
            font-size: 16px;
            line-height: 30px;
        }

        .placeName:hover {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }

        .index {
            width: 100%;
            height: 30px;
            margin-top: 30px;
        }

        .index > ul {
            display: in-line;
            list-style-type: none;
            width: 90%;
            margin-left: -20px;
            height: 100%;
        }

        .index ul li {
            width: 10%;
            margin: 1px;
            text-align: center;
            height: 100%;
            float: left;
            line-height: 30px;
            background-color: #CFCFCF;
            border-radius: 5px;
            border: 1px solid #CFCFCF;
            cursor: pointer;
        }

        /*.index ul li:hover{
        border:1px solid pink;
        background-color:green;
        }*/
        #active {
            border: 1px solid #87CEFF;
            background-color: #87CEFF;
        }

        .cityList {
            width: 100px;
        }

        .table1 {
            width: 80%;
            border-collapse: collapse;

        }

        .table1 th {
            background: #EAF2D3;
        }

        .table1 th, .table1 td {
            border: 1px solid #98bf21;
        }

        .table1 td {
            text-align: center;
        }

        #tableData {
            height: 350px;
            overflow-y: scroll;
            overflow-x: hidden;
            display: block;
        }

        table thead, tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        table thead {
            width: calc(100% - 1em);
        }

        #chart4 table {
            width: 80%;
            margin-left: 10%;
        }

        #chart4 td {
            width: 33.2%;
            height: 40px;
            border-bottom: 1px solid green;
        }

        #chart4 tr {
            height: 40px;
        }

        .table tr td {
            text-align: center;
        }

        .check {
            padding-left: 20px;
            height: 50px;
            line-height: 30px;
        }

        .place p {
            display: inline-block;
        }

        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div id="_1" class="chart">
    <div id="chart1">
        <div class="time">
            <div class="dateTime">
                <span class="label">开始时间:</span>
                <input type="text" class="input" id="timeBegin" placeholder="2017-01-01">
            </div>
            <div class="dateTime">
                <span class="label">结束时间:</span>
                <input type="text" class="input" id="timeEnd" placeholder="2017-01-01">
            </div>
            <div class="check" style="display:none">
                <label><input type="radio" name="inquire" class="radioItem" value="day" checked/>日</label>
                <!-- <label><input type="radio" name="inquire" class="radioItem" value="hour" />小时</label> -->
            </div>
        </div>
        <div class="clear"></div>
        <div class="place">
            <p>请选择两个对比城市:</p>
            <label>城市1:<select class="cityList" type="text" id="city1"></select></label>
            <label>城市2:<select class="cityList" type="text" id="city2"></select></label>
            <div class="index">
                <ul>
                    <li id="active">AQI</li><!---->
                    <li>PM2.5</li>
                    <li>PM10</li>
                    <li>SO2</li>
                    <li>NO2</li>
                    <li>CO</li>
                    <li>O3</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div id="_2" class="chart">
    <div id="chart2"></div>
</div>

<div id="_3" class="chart">
    <div id="chart3"></div>
</div>

<div id="_4" class="chart">
    <div id="chart4">
        <table class="table1">
            <thead>
            <tr>
                <th>时间</th>
                <th><span id="cityshow1"></span></th>
                <th><span id="cityshow2"></span></th>
            </tr>
            </thead>
            <tbody id="tableData"></tbody>
        </table>
    </div>
</div>
<script src="../../ref/laydate/laydate.js" charset="utf-8"></script>
<script type="text/javascript">
 /*   var a = '2017-01-02';
    var b = '2017-01-10';*/

 var a = getBeforeDate(8);
 var b  = getBeforeDate(1);
    var city1 = null;
    var city2 = null;
    var airType = null;
    var portParameterO = null;
    var portParameterT = null;
    laydate.render({
        elem: '#timeBegin',
        type: 'datetime',
        //value: new Date(),
        done: function (value, date, endDate) {
            //var Time1=value.slice(0,10);
            getTimeBegin(value);
        }
    });
    laydate.render({
        elem: '#timeEnd',
        type: 'datetime',
        //value: new Date(),
        //min: -7,
        //max: 7,
        done: function (value) {
            //var Time2=value.slice(0,10);
            getTimeEnd(value);
        }
    });
    //$('#timeBegin').val(getBeforeDate(7));
    //$('#timeEnd').val(getBeforeDate(0));
    //获取table数据
    function showTable(first, second, days) {
        var len = days.length || 5;
        $('#tableData').empty();
        for (var i = 0; i < len; i++) {
            $('#tableData').append(
                '<tr>' +
                '<td>' + days[i] + '</td>' +
                '<td>' + first[i] + '</td>' +
                '<td>' + second[i] + '</td>' +
                '</tr>'
            );
        }
        $("#tableData tr:even").css("background-color", "#bbffff");
        $("#tableData tr:odd").css("background-color", "#bbbbff");
    }

    //画echart图
    function draw(mName, data, type, id, days) {
        var len = mName.length;
        var mData = [];
        for (var i = 0; i < len; i++) {
            mData[i] = {"name": mName[i], "type": type, "data": data[i]};
        }
        var myChart = echarts.init(document.getElementById(id));
        var option = {
            tooltip: {
                show: true,
                trigger: 'axis'
            },
            legend: {
                data: mName,
                padding: 5,
                padding: 10
            },
            xAxis: [
                {
                    data: days,
//						axisLabel :{  
//  						interval:0   
//							} 
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: mData
        };
        myChart.setOption(option);
        window.onresize = myChart.resize;
    }

    //获取城市列表
    function showPlace(data) {
        for (var i = 0; i < data.length; i++)
            $('.cityList').append('<option class="placeName">' + data[i] + '</option>');
    }

    function getData(data) {
        var name = [], aqi = [];
        for (var i = 0; i < data.length; i++) {
            name[i] = data[i].name;
        }
        return name;
    }

    //获取开始时间
    function getTimeBegin(value) {
        a = value;
        ajax(a, b, city1, city2, airType, portParameterO, portParameterT);
    }

    //获取结束时间
    function getTimeEnd(value) {
        b = value;
        ajax(a, b, city1, city2, airType, portParameterO, portParameterT);
    }

    //按照天/小时查询
    $('.radioItem').bind("change", function () {
        var selectedvalue = $("input[name='inquire']:checked").val();
        if (selectedvalue == 'day') {
            portParameterO = "day";
            portParameterT = "day";
            startTimeDefault = getBeforeDate(7);
            EndTimeDefault = getBeforeDate(0);
            $("#timeBegin").attr("placeholder", startTimeDefault);
            $("#timeEnd").attr("placeholder", EndTimeDefault);
            TimeDefaults(startTimeDefault, EndTimeDefault);
        } else {
            portParameterO = "hour";
            portParameterT = "date";
            startTimeDefault = getBeforeDate(1);
            EndTimeDefault = getBeforeDate(0);
            $("#timeBegin").attr("placeholder", startTimeDefault);
            $("#timeEnd").attr("placeholder", EndTimeDefault);
            TimeDefault(startTimeDefault, EndTimeDefault);
        }
    })
    //获取城市
    $('select').bind('change', function () {
        city1 = $('.cityList option:selected').eq(0).text();
        city2 = $('.cityList option:selected').eq(1).text();
        if (city1 == city2) {
            alert('城市名不能相同');
        } else {
            ajax(a, b, city1, city2, airType, portParameterO, portParameterT);
        }
    })
    //获取选取类型
    $('.index ul li').bind('click', function () {
        $(this).attr('id', "active").siblings().removeAttr('id');
        var airTypes = ['aqi', 'pm25', 'pm10', 'so2', 'no2', 'co', 'o3'];
        var ListIndex = $(this).index();
        airType = airTypes[ListIndex];
        ajax(a, b, city1, city2, airType, portParameterO, portParameterT);
    })

    //获取当前日期和前七天的日期
    function getBeforeDate(n) {
        var n = n;
        var d = new Date();
        var year = d.getFullYear();
        var mon = d.getMonth() + 1;
        var day = d.getDate();
        if (day <= n) {
            if (mon > 1) {
                mon = mon - 1;
            }
            else {
                year = year - 1;
                mon = 12;
            }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        hh = fix(d.getHours());
        mm = fix(d.getMinutes());
        ss = fix(d.getSeconds());

        function fix(n) {
            return n < 10 ? "0" + n : n;
        }

        s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day) + " " + hh + ":" + mm + ":" + ss;
        return s;
    }

    var startTimeDefault = getBeforeDate(8);
    var EndTimeDefault = getBeforeDate(1);
    $("#timeBegin").attr("placeholder", startTimeDefault);
    $("#timeEnd").attr("placeholder", EndTimeDefault);

    function TimeDefault(startTimeDefault, EndTimeDefault) {
        ajax(a, b, city1, city2, airType, portParameterO, portParameterT);
    }

    function TimeDefaults(startTimeDefault, EndTimeDefault) {
        ajax(a, b, city1, city2, airType, portParameterO, portParameterT);
    }

    //执行请求操作；
    ajax(a, b, city1, city2, airType, portParameterO, portParameterT);

    function ajax(a, b, city1, city2, airType, portParameterO, portParameterT) {
        a = a || startTimeDefault;
        b = b || EndTimeDefault;
        city1 = city1 || "开封市";
        city2 = city2 || "郑州市";

        $("#cityshow1").html(city1);
        $("#cityshow2").html(city2);
        airType = airType || "aqi";
        portParameterO = portParameterO || "day";
        portParameterT = portParameterT || "day";
        var citydata;
        var mName = [];
        var first = [];
        var second = [];
        var days = [];
        if (a && b && city1 && city2 && airType && portParameterO && portParameterT && city1 != city2) {
            console.log(a);
            console.log(b);
            var ajax1 = $.get('/hbtserver/aqi/city/' + portParameterO + '?' + portParameterT + '0=' + a + '&' + portParameterT + '1=' + b + '&city=' + city1, function (result) {
                result.sort(function (a, b) {
                    return Date.parse(a.date) - Date.parse(b.date);//时间正序
                });
                for (var i = 0; i < result.length; i++) {
                    first.push(result[i][airType].toFixed(2));

                    var dayshow = result[i].date;
                    dayshow = dayshow.substr(0, dayshow.length - 10);
                    days.push(dayshow);
                }
                showTable(first, second, days);
                getCityData(first, city1, days);
            })
            $.when(ajax1).done(function () {
                $.get('/hbtserver/aqi/city/' + portParameterO + '?' + portParameterT + '0=' + a + '&' + portParameterT + '1=' + b + '&city=' + city2, function (result) {
                    result.sort(function (a, b) {
                        return Date.parse(a.date) - Date.parse(b.date);//时间正序
                    });
                    for (var i = 0; i < result.length; i++) {
                        second.push(result[i][airType].toFixed(2));
                    }
                    showTable(first, second, days);
                    getCityData(second, city2, days);
                })
            });
            console.log("可以发送请求")
        } else {
            console.log("请选择完整参数！")
        }

    }

    var count = 0;
    var data = [];
    var mName = [];

    function getCityData(citydata, cityname, days) {
        data.push(citydata);
        mName.push(cityname);
        count++;
        if (count == 2) {
            count = 0;
            console.log(mName);
            console.log(data);
            draw(mName, data, 'line', 'chart2', days);
            draw(mName, data, 'bar', 'chart3', days);
            data = [];
            mName = [];
        }
    }

    $(function () {
        $.get('/hbtserver/station/query?shi=shi', function (rt, st) {
            var shiData = $.parseJSON(rt);
            var cityName = getData(shiData);
            showPlace(cityName);
            $("#city1").find("option:contains('郑州市')").attr("selected", true);
            $("#city2").find("option:contains('开封市')").attr("selected", true);
        });
    })
</script>
</body>
</html>
